<template>
  <el-config-provider :locale="locale">
    <router-view @click="handleUpdateLastClickTime"></router-view>
  </el-config-provider>
</template>
<!-- <style lang="scss" src="xxx.scss"/> -->
<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from "vue";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
import { useI18n } from "vue-i18n";
import moment from "moment";
import bus from "./utils/bus";
import i18n from "./i18n";
import utils from "./utils/utils";
import { useStore } from "./stores/store";
const store = useStore();

const { t } = useI18n({ useScope: "global" });
window.t = t;

const language = ref("zh_CN");
const locale = computed(() => {
  // console.log("app computed", i18n.global.locale.value);
  return i18n.global.locale.value === "zh_CN" ? zhCn : en;
});

const handleUpdateLastClickTime = () => {
  let now = moment().format("YYYY-MM-DD HH:mm:ss");
  store.setSession("last-click-time", now);
  // console.log("app last-click-time", now);
};

onMounted(() => {
  // 每次刷新页面，模拟最后触发操作，记录最后触发时间
  handleUpdateLastClickTime();

  bus.on("lang-changed", (lang: string) => {
    // console.log("app lang-changed", lang);
    language.value = lang;
  });
});

onUnmounted(() => {
  // console.log("app onUnmounted");
  bus.off("lang-changed");
});
</script>
<style lang="scss">
html,
body {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  height: 100%;
  min-width: 1024px;
}

// fix 主要区域容器空白，对于 tab 页签需要充满整个区域的情况使用
.fix-el-main-padding {
  margin: -20px;
  background-color: #fff;
}

// tab 页签内的主要区域
.tab-router-view {
  padding: 20px;
  background-color: $main-background-color;
}

// el-dialog 最小宽度，默认是 50%，跟随浏览器宽度自适应
.dialog-min-width {
  min-width: 400px;
}

.dialog-large-width {
  width: 800px !important;
}

.dialog-default-width {
  width: 600px;
}

.dialog-small-width {
  width: 300px;
}

// fix 下拉弹出默认被表格覆盖
// .el-dropdown__popper {
//   z-index: 2030 !important;
// }
// .main-container {
//   padding: 20px;
//   background-color: #fff;
// }
// 表格搜索区域
.data-grid-search-form {
  background-color: #fff;
  padding-top: 25px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  margin-bottom: 15px;

  // fix el-select 没有宽度问题
  // .el-form-item {
  //   display: flex;
  // }
}

// 表格搜索区域，查询按钮
.showSearchButton {
  //默认隐藏，当屏幕尺寸小于 992 时显示
  display: none;
  text-decoration: none;
}

@media only screen and (max-width: 992px) {
  .hideSearchButton {
    display: none;
  }

  .showSearchButton {
    display: inherit;
  }
}

// 表格容器
.data-grid-container {
  padding: 20px;
  background-color: #fff;
}

.data-grid-config-button {
  text-align: right;
}

.data-grid-config-button .el-icon {
  cursor: pointer;
  color: var(--el-text-color-regular);
}

// 表格标题
.data-grid-header-cell {
  background-color: #fafafa !important;
  color: #666;
}

.data-grid-pagination {
  padding-top: 15px;
}

// .w-35 {
//   width: 35%;
// }
// .w-50 {
//   width: 50%;
// }
// .w-70 {
//   width: 70%;
// }
// .w-100 {
//   width: 100%;
// }
// fix 所有按钮取消圆角
.el-button {
  border-radius: 0;
}

// fix 日期选择框，宽度和输出框不一致问题，需要同时配置 :clearable="false"
.fix-el-date-picker-width {
  width: 100%;
}

.fix-el-date-picker-width .el-input__inner {
  padding-right: 10px;
}

.fix-el-input-number-width {
  width: 100% !important;
}
.fix-el-input-number-align .el-input__wrapper {
  padding: 1px 11px !important;
}
.fix-el-input-number-align .el-input__inner {
  text-align: left !important;
}

// fix 抽屉，头部标题下边距
.el-drawer__header {
  margin-bottom: 0;
}

// fix 级联选择器宽度 100%
.fix-el-cascader-width-100 {
  width: 100% !important;
}

/* 响应式布局，如果设置了最小高度，在低分辨率下效果不好 */
/* min-height: $main-min-height; */
.fix-el-card .el-card__header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nprogress .bar {
  background: #409eff !important; //自定义颜色
}

// 231110cxg el-descriptions label宽度15%，content宽度35%
.el-descriptions__label {
  width: 15%;
}
.el-descriptions__content {
  width: 35%;
}
</style>
